<template>
  <!-- 导出文件列表 -->
  <div>
    <el-dialog title="导出文件列表" v-model="dialogVisible" width="800">
      <div v-loading="loading">
        <ProTable
          ref="proTable"
          :columns="columns"
          :request-api="getTableList"
          :data-callback="dataCallback"
          row-key="kid"
          :tool-button="false"
          max-height="500"
        >
          <template #operation="scope">
            <div>
              <el-button @click="downLoadFile(scope.row)">下载</el-button>
            </div>
          </template>
        </ProTable>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="ExportFileList">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { findExportInfoPager, exportData } from "@/api/modules/assetManagement";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();

const loading = ref(false);

const downLoadFile = item => {
  loading.value = true;
  exportData({
    categoryName: item.exportFileName
  })
    .then((res: any) => {
      loading.value = false;
      let file = URL.createObjectURL(res);
      if (file) {
        const a = document.createElement("a");
        a.href = file;
        a.target = "_blank";
        a.download = item.exportFileName;
        a.click();
        a.remove();
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

// 表格配置项
const columns = reactive([
  { prop: "exportFileName", label: "文件" },
  { prop: "createTime", label: "创建时间", width: 170 },
  { prop: "operation", label: "操作", width: 170 }
]);

// 如果你想在请求之前对当前请求参数做一些操作
const getTableList = (params: any) => {
  loading.value = true;
  return findExportInfoPager(userStore.userInfo.companyNo, {
    _search: false,
    nd: new Date().getTime(),
    sidx: "exportInfo_id",
    sord: "desc",
    page: params.pageNum,
    rows: params.pageSize
  }).catch(() => {
    loading.value = false;
  });
};

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (data: any) => {
  loading.value = false;
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

const dialogVisible = ref(false);

const open = () => {
  dialogVisible.value = true;
};

defineExpose({
  open
});
</script>

<style scoped lang="scss">
:deep(.card) {
  padding: 10px;
  border: none;
  box-shadow: none;
}
</style>
